<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta charset="utf-8">
		<link rel="icon" href="https://jscdn.com.cn/highcharts/images/favicon.ico">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<script src="https://code.highcharts.com.cn/highcharts/highcharts.js"></script>
		<script src="https://code.highcharts.com.cn/highcharts/highcharts-more.js"></script>
		<script src="https://code.highcharts.com.cn/highcharts/modules/exporting.js"></script>
		<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
	</head>
	<body>
		<!--
*************************************************************************
   Generated by JShare at 2020-05-31 15:31:57
   From: https://jshare.com.cn/demos/N4ByL0
*************************************************************************
 -->
		<ul>
			<li><a href="/" style="color: #FFC107;">登录页</a></li>
			<li><a href="/index/" style="color: #FFC107;">主页</a></li>
			<li><a href="/show/" style="color: #FFC107;">图像展示</a></li>
		</ul>
		<div id="container"></div>
		<div id="wrapper">
			<button id="plain">普通</button>
			<button id="inverted">反转</button>
			<button id="polar">极地图</button>
		</div>
		<div id="img1" style="text-align: center;">
			<p>注：神经质、掩饰性、内外向的总分过大，为了图片美观，图上展示的是经过200倍比例缩小的图片。其余属性为总分缩小10倍。</p>
		</div>
		<script>
			var chart = Highcharts.chart('container', {
				title: {
					text: '图表变换-症状与个性'
				},
				subtitle: {
					text: '普通的'
				},
				xAxis: {
					categories: ['神经质', '掩饰性', '内外向', '强迫症状', '人际关系敏感', '抑郁', '焦虑', '敌对', '恐怖', '偏执', '精神病性', '其他']
				},
				series: [{
					type: 'column',
					colorByPoint: true,
					data: [116, 124.5, 143.7, 129.2, 90.0, 79.0, 71.6, 70.5, 67.4, 66.1, 70.6, 70.4],
					showInLegend: false
				}]
			});
			// 给 wrapper 添加点击事件
			Highcharts.addEvent(document.getElementById('wrapper'), 'click', function(e) {
				var target = e.target,
					button = null;
				if (target.tagName === 'BUTTON') { // 判断点的是否是 button
					button = target.id;
					switch (button) {
						case 'plain':
							chart.update({
								chart: {
									inverted: false,
									polar: false
								},
								subtitle: {
									text: '普通的'
								}
							});
							break;
						case 'inverted':
							chart.update({
								chart: {
									inverted: true,
									polar: false
								},
								subtitle: {
									text: '反转'
								}
							});
							break;
						case 'polar':
							chart.update({
								chart: {
									inverted: false,
									polar: true
								},
								subtitle: {
									text: '极地图'
								}
							});
							break;
					}
				}
			});
		</script>
	</body>
</html>
